<template>
    <div class="global">
        <div style="margin-bottom: 10px;">

            <el-input v-model="queryform.keyword" style="width: 200px;margin-right: 10px;"
                placeholder="请输入关键字查询"></el-input>


            <el-button type="primary" @click="search()" plain>查询</el-button>
            <el-button type="info" @click="research()" plain>重置</el-button>
            <el-button type="success" @click="add()" style="float: right;" plain>新增</el-button>
        </div>
        <div style="margin-bottom: 10px;display:flex;">
            <el-button type="primary" @click="download" style="margin-right: 10px;" plain>下载模板</el-button>
            <!-- <el-button type="primary" @click="import" plain>导入</el-button> -->
            <el-upload v-model="fileList" class="upload-demo" action="http://localhost:9035/api/question/import"
                accept=".xlsx">
                <el-button type="primary">导入</el-button>
            </el-upload>

        </div>

        <div class="table">
            <el-table :data="tableData" stripe>
                <el-table-column type="expand">
                    <template v-slot="scope">
                        <el-table :data="scope.row.list" stripe>
                            <el-table-column type="index" width="100" label="序号" align="center"
                                sortable></el-table-column>

                            <el-table-column prop="content" label="选项">

                            </el-table-column>

                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column type="index" width="100" label="序号" align="center" sortable></el-table-column>

                <el-table-column prop="name" label="题目名称">

                </el-table-column>
                <el-table-column prop="type" label="题目类型">

                    <template v-slot="scope">
                        <el-tag type="primary" v-if="scope.row.type == 0">单选题</el-tag>
                        <el-tag type="primary" v-if="scope.row.type == 1">多选题</el-tag>
                        <el-tag type="primary" v-if="scope.row.type == 2">填空题</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="papername" label="所属问卷">
                </el-table-column>

                <el-table-column prop="createtime" label="创建时间">
                </el-table-column>


                <el-table-column label="操作" align="center" width="300" fixed="right">
                    <template v-slot="scope">

                        <el-button size="mini" type="warning" plain @click="edit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination" style="margin-top: 10px;display: flex;justify-content: right;">
                <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNo"
                    :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout=" prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="题目信息" v-model="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">

                <el-form-item label="题目名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="题目类型" prop="type">
                    <el-select v-model="form.type" placeholder="请选择题目类型">
                        <el-option label="单选题" :value="0"></el-option>
                        <el-option label="多选题" :value="1"></el-option>
                        <el-option label="填空题" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属问卷" prop="paperid">
                    <el-select v-model="form.paperid" placeholder="请选择所属问卷">
                        <el-option v-for="item in paperlist" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="题目" v-if="form.type !== 2">
                    <div style="display: flex;justify-content: space-between;">
                        <div>
                            <div v-for="(item, index) in form.list" style="margin-bottom: 10px;">
                                <el-input placeholder="请输入选项" v-model="item.content"
                                    style="width: 200px;margin-right: 10px;"></el-input>
                                <el-button type="primary" v-if="index == 0" :icon="Plus" @click="addOption">

                                </el-button>
                                <el-button @click="deleteOption(index)" type="danger" style="margin-right: 10px;"
                                    v-if="index !== 0" :icon="Minus">

                                </el-button>
                            </div>
                        </div>
                    </div>
                </el-form-item>


            </el-form>

            <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Minus } from '@element-plus/icons-vue'
import { onMounted, readonly, ref } from "vue";
import service from "../request/Request";

const keyword = ref("")
const paperlist = ref([])
const fromVisible = ref(false)
const form = ref({});
const rules = {

    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择类型', trigger: 'blur' },

    ],
    paperid: [
        { required: true, message: '请选择所属问卷', trigger: 'blur' },

    ],

}
const formRef = ref();
const edit = (row) => {
    form.value = row
    form.value.cover = form.value.cover == null ? '' : form.value.cover
    fromVisible.value = true
}
const download = async () => {
    try {
        const res = await fetch("/api/question/template");
        const blob = await res.blob();
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "template.xlsx";
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
        ElMessage.success("下载成功")
    } catch (e) {
        console.log(e)
        ElMessage.warning("下载失败")
    }
}
const save = () => {


    formRef.value.validate(async (valid) => {
        console.log(valid)
        if (valid) {
            form.value.list.forEach((el, index) => {
                el.sort = index

            });
            let url = form.value.id ? "/question/edit" : "/question/add";
            const res = await service.post(url,

                {
                    id: form.value.id,
                    name: form.value.name,
                    type: form.value.type,
                    paperid: form.value.paperid,

                    list: form.value.list,

                },
                {
                    type: "json"
                }


            )
            console.log(res)
            if (res.code == 200) {
                getlist()
                fromVisible.value = false
                ElMessage({
                    message: res.msg,
                    type: "success"
                })
            }
        }

    })

}
const typedata = ref([])
const avatar = ref("")
const queryform = ref({

    pageNo: 1,
    pageSize: 10,
    keyword: ""
});
const tableData = ref([])
const total = ref(0)
const handleCurrentChange = (e) => {
    queryform.value.pageNo = e;
    getlist()
}
const add = () => {
    fromVisible.value = true
    form.value = {}
    form.value.cover = ""
    form.value.list = [{
        content: ""
    }]
    console.log("1233")
}
const addOption = () => {
    form.value.list.push({
        content: ""
    })
}
const deleteOption = (index) => {
    form.value.list.splice(index, 1);

}
onMounted(() => {
    getlist()
    getall()
})
const getall = async () => {
    const res = await service.get("/paper/all");
    console.log(res)
    paperlist.value = res.data
}
const search = () => {
    queryform.value.pageNo = 1;
    getlist()
}
const research = () => {
    queryform.value = {}
    queryform.value.pageNo = 1;
    queryform.value.pageSize = 10;
    queryform.value.type = ""
    getlist()
}
const handleAvatarSuccess = (e) => {
    form.value.cover = e.data
}
const publish = (row) => {
    ElMessageBox.confirm(
        `是否确认${row.status == 0 ? '发布' : '取消发布'}？`,
        '确认信息',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await service.post("/paper/publish", { id: row.id })
            if (res.code == 200) {
                ElMessage({
                    type: "success",
                    message: "成功"
                })
                getlist()
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'canceled',
            })
        })
}
const del = (id) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        '确认信息',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await service.post("/question/delete", { id: id })
            if (res.code == 200) {
                ElMessage({
                    type: "success",
                    message: "成功"
                })
                getlist()
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const getlist = async () => {
    const res = await service.post("/question/list", queryform.value
    )
    console.log(res)
    tableData.value = res.data.records
    total.value = res.data.total
}

</script>
<style scoped>
.global {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>